{extend name="public/layout"/}
{block name="title"}{$currentInfo.name}{/block}
{block name="head"}
<style>
  .product-class .swiper-wrapper{padding: 10px 10px 0 10px}
  .product-class .swiper-slide{border: 1px solid #ddd;width: auto!important;margin: 0 8px 0 0;height: 30px;line-height: 30px;padding: 0 10px;cursor: pointer;}
  .product-class .swiper-slide.on{color: #fff;background: #363941;border: solid 1px #363941;position: relative;}

</style>
{/block}
{block name="body"}
<section class="mc-view-box">
  {include file="public/index_header"/}
  <div class="mc-scrollview">
    <div class="swiper-container product-class" id="product-class">
      <div class="swiper-wrapper font-size12">
        <div class="swiper-slide on" onclick="doAction.changeStatus(this)" data-id="26">全部</div>
        {volist name="top_class['child']" id="vo"}
        <div class="swiper-slide" onclick="doAction.changeStatus(this)" data-id="{$vo.id}">{$vo.name}</div>
        {/volist}
      </div>
    </div>
    <form action="" id="search-form">
      <input type="hidden" name="class_id" value="{$Request.param.class_id}">
    </form>
    <div class="mescroll" id="mescroll">
      <div class="case-page-list" id="mescroll-content"></div>
    </div>
  </div>
  {include file="public/index_footer" /}
</section>
{/block}
{block name="script"}
<script type="text/html" id="list-tpl">
  <ul class="mc-avg-sm-2 mc-avg-between-lg">
  {@each data as value}
    <li>
      <a href="javascript:;" class="case-item p-d">
        <div class="case-thumb" style="background-image:url(${value.thumb});background-position:bottom center"></div>
        <div class="">
          <div class="case-title">产品名称：${value.title}</div>
          <div class="case-desc">环保等级：${value.level}</div>
        </div>
      </a>
    </li>
  {@/each}
  </ul>
</script>
<script>
  $(function () {
    swiper.init();
    doAction.getlist();
  });
  var doAction = {
    getlist:function () {
      helper.mescroll('mescroll',{
        callback: function (page,mescroll) {
          helper.getAjax({
            url: '/home/cms/getPagelist.html?pageNumber=' + page.num + '&pageSize=' + page.size,
            data:helper.getSearchParams(),
            success: function (curPageData) {
              mescroll.endBySize(curPageData.rows.length, curPageData.total);
              var html = juicer($('#list-tpl').html(),{data:curPageData.rows});
              $('#mescroll-content').append(html);
            }, error:function (e) {
              mescroll.endErr();
            }
          });
        }
      });
    },
    changeStatus:function (obj) {
      var id = $(obj).data('id');
      $('input[name="class_id"]').val(id);
      $(obj).addClass('on').siblings().removeClass('on');
      doAction.getlist();
    }
  }
</script>
{/block}